<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>新闻管理</title>
    <script src="${ctx}/static/js/jquery.validate.min.js"></script>
    <script src="${ctx}/static/js/messages_bs_zh.js"></script>
    <link rel="stylesheet" href="${ctx}/static/uploadify/uploadify.css" />
    <link rel="stylesheet" href="${ctx}/static/jcrop/jquery.Jcrop.min.css" />
    <script src="${ctx}/static/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
    <script src="${ctx}/static/jcrop/jquery.Jcrop.min.js" type="text/javascript"></script>

    <style type="text/css">
        h3{
            margin-top:5px;
        }
        .jcrop-holder #preview-pane {
            display: block;
            position: absolute;
            z-index: 2000;
            top: 10px;
            right: -280px;
            padding: 6px;
            border: 1px rgba(0,0,0,.4) solid;
            background-color: white;

            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;

            -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
            box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
        }

        /* The Javascript code will set the aspect ratio of the crop
           area based on the size of the thumbnail preview,
           specified here */
        #preview-pane .preview-container {
            width: 360px;
            height: 180px;
            overflow: hidden;
        }
    </style>
</head>

<body>

<div class="main-content-inner">
    <!-- #section:basics/content.breadcrumbs -->
    <div class="breadcrumbs" id="breadcrumbs">
        <script type="text/javascript">
            try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
        </script>

        <ul class="breadcrumb">
            <li>
                <i class="ace-icon fa fa-home home-icon"></i>
                <a href="${ctx}/welcome">主页</a>
            </li>
            <li class="active">新闻</li>
        </ul><!-- /.breadcrumb -->

    </div>
    <!-- /section:basics/content.breadcrumbs -->

    <div class="page-content">

        <c:if test="${not empty message}">
            <div id="message" class="alert alert-success"><button data-dismiss="alert" class="close">×</button>${message}</div>
        </c:if>

        <div class="page-header">
            <h1>
                新闻发布
            </h1>
        </div><!-- /.page-header -->

        <div class="row">
            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                <div class="row">
                    <div class="col-xs-12">
                        <!-- " -->
                        <form id="inputForm" action="${ctx}/news/add"  method="post" class="form-horizontal">
                            <h3>新闻</h3>
                            <input type="hidden" name="id" id="id" value=""/>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right" for="newstitle"> 标题: </label>
                                <div class="col-sm-9">
                                    <input type="text" placeholder="标题" class="input-xlarge col-xs-10 col-sm-5 required" name="newstitle" id="newstitle">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right" for="desp"> 内容: </label>
                                <div class="col-sm-9">
                                    <textarea class="input-xlarge" name="newsdesp" id="desp" rows="8"></textarea> <%--class="col-xs-10 col-sm-5 required"--%>
                                </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right" for="upPicButton">新闻图片：</label>
                                <div class="col-sm-4">
                                    <ul id="imageList" class="ace-thumbnails clearfix">
                                          <!-- #section:pages/gallery -->
                                        <c:forEach items="${customor.distributor.licencePhoto}" var="image" varStatus="status">
                                            <li>
                                                <img width="360" name="images1" height="180" alt="360x180" src="${customor.distributor.licencePhoto}" title="123"/>
                                                <input type="text" id="images" name="images" value="${customor.distributor.licencePhoto}"/>
                                                <div class="tools tools-bottom">
                                                    <a href="javascript:void(0);" onclick="del_image(this)">
                                                        <i class="ace-icon fa fa-times red"></i>
                                                    </a>
                                                </div>
                                            </li>
                                        </c:forEach>
                                    </ul>

                                    <button id="upPicButton" data-toggle="modal" data-target="#modal-form" class="btn btn-app btn-purple btn-sm" type="button">
                                        <i class="ace-icon fa fa-cloud-upload bigger-200"></i>
                                        上传照片
                                    </button>

                                </div>
                            </div>

                            <!-- Page's button -->
                            <div class="clearfix form-actions">
                                <div class="col-md-offset-3 col-md-9">
                                    <%--<shiro:hasPermission name="user:alluser:updateinfo">--%>
                                        <button id="submit_btn" class="btn btn-info" type="submit">
                                            <i class="ace-icon fa fa-check bigger-110"></i>
                                            发布
                                        </button>
                                    <%--</shiro:hasPermission>--%>
                                    <%--&nbsp; &nbsp; &nbsp;
                                    <shiro:hasPermission name="user:alluser:updateinfo">
                                        <c:if test="${customor.outservice != '1' }">
                                            <button id="stopserkvice" class="btn" type="reset">
                                                <i class="ace-icon fa fa-undo bigger-110"></i>
                                                暂停服务
                                            </button>
                                        </c:if>
                                        <c:if test="${customor.outservice eq '1' }">
                                            <button id="renewservice" class="btn btn-info" type="reset">
                                                <i class="ace-icon fa fa-check bigger-110"></i>
                                                恢复服务
                                            </button>
                                        </c:if>
                                    </shiro:hasPermission>--%>
                                    &nbsp; &nbsp; &nbsp;
                                    <button id="cancel_btn" class="btn" type="reset" onclick="history.back()">
                                        <i class="ace-icon fa fa-undo bigger-110"></i>
                                        返回
                                    </button>
                                </div>
                            </div>
                        </div>
                        </form>
                        <!-- Picture upload -->
                        <div id="modal-form" class="modal" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        <h4 class="blue bigger">上传图片</h4>
                                    </div>

                                    <div class="modal-body">
                                        <div class="row">
                                            <div class="col-xs-12 col-sm-12 center">
													<span class="profile-picture">
														<div id="preview-pane">
						  									<div class="preview-container">
															<img class="jcrop-preview" id="avatar2" src="" style="display: none;"/>
															</div>
														</div>
													</span>

                                                <div class="space space-4"></div>

                                                <input id="file_upload" name="file_upload" type="file" multiple="true">

                                                <img id="mypic" alt="" src="">

                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn btn-sm" data-dismiss="modal">
                                            <i class="ace-icon fa fa-times"></i>
                                            取消
                                        </button>

                                        <button class="btn btn-sm btn-primary" onclick="cutPic()">
                                            <i class="ace-icon fa fa-check"></i>
                                            确定
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Picture upload -->

                    </div>
                </div>
            </div>
        </div>

    </div><!-- /.page-content -->
</div>



<!-- inline scripts related to this page -->

<%-- 	<script src="${ctx}/static/js/jquery.validate.min.js"></script> --%>
<%-- 	<script src="${ctx}/static/js/messages_bs_zh.js"></script> --%>

<script>
    var imageFile, x=0,y=0,w=500,h=500;
    $('#file_upload').uploadify({
        'buttonText' : '上传图片',
        'swf'      : '${ctx}/static/uploadify/uploadify.swf',
        'uploader' : '/ajax/fileUpload',/*?type=3&id=1*/
        'fileSizeLimit':1*1024*1024,
        'fileObjName' : 'file',
        'fileTypeExts'  : '*.jpg;*.jpge;*.gif;*.png',
        'removeCompleted'	: false,
        'width'	: '100%',
        'buttonClass'	: "btn btn-info",
        'onUploadSuccess' : function(file, data, response) {
            console.log(data);
            alert("1 :"+data)
            $('#avatar2').show();
            $('#avatar2').attr("src", data);
            //$('#avatar2').css({width:"360px"});
            //$('#avatar2').css({height:"180px"});
            imageFile=data;
            jcrop_api.setImage(data);
        } ,
        'onInit': function () {
            $("#file_upload-queue").hide();
        }
    });

    $('#mypic').Jcrop({
        onChange:   setCoords,
        onSelect:   setCoords,
        aspectRatio: xsize / ysize,
        boxWidth: 360,
        boxHeight: 180,
        minSize: [ 36, 20 ],
        maxSize: [ 3600, 2000 ]
    },function(){
        jcrop_api = this;
    });

    function cutPic() {
        w=$('#avatar2').width();
        h=$('#avatar2').height()
        $.ajax({
            type:'get',
            url:'/ajax/newPicCut',
            data:{'x':x,'y':y,'w':w,'h':h,'imageFile':imageFile},
            //data:'imageFile='+ imageFile + '&x=' + x + '&y=' + y + '&w=' + w + '&h=' + h,
            success:function(data) {
                if(data != 'error') {
// 						$('#imageList').append('<li> \
// 							<img width="360" height="180" alt="360x180" src="' + data + '" /> \
// 								<input type="hidden" name="images" value="'+ data+'"/> \
// 								<div class="tools tools-bottom"> \
// 									<a href="javascript:void(0);" onclick="del_image(this)"> \
// 										<i class="ace-icon fa fa-times red"></i> \
// 									</a> \
// 								</div> \
// 							</li>');
                    if(document.getElementById('images')){
                        $('#imageList').find("img").attr("src",data);
                        document.getElementById('images').value=data;
                        alert("2 :"+data)
                    }else{
                        alert("3 :"+data)
                        $('#imageList').append('<li> \
							<img width="360" height="180" alt="360x180" src="' + data + '" /> \
								<input type="hidden" name="images" value="'+ data+'"/> \
								<div class="tools tools-bottom"> \
									<a href="javascript:void(0);" onclick="del_image(this)"> \
										<i class="ace-icon fa fa-times red"></i> \
									</a> \
								</div> \
							</li>');
                    }
                }else {
                    alert('图片格式错误,请转换相应格式！');
                }

                if($("#imageList li").length > 1) {
                    $('#upPicButton').hide();
                }else {
                    $('#upPicButton').show();

                }

                jcrop_api.destroy();
                $('#mypic').Jcrop({
                    onChange:   setCoords,
                    onSelect:   setCoords,
                    aspectRatio: xsize / ysize,
                    boxWidth: 360,
                    boxHeight: 180,
                    minSize: [ 36, 20 ],
                    maxSize: [ 3600, 2000 ]
                },function(){
                    jcrop_api = this;
                });

                $('#avatar2').hide();
                $('#modal-form').modal('hide');
            }
        });
    }

    function setCoords(c)
    {
        var bounds = jcrop_api.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];

        x=c.x;
        y=c.y;
        w=c.w;
        h=c.h;
        updatePreview(c);
    };

    function updatePreview(c)
    {
        if (parseInt(c.w) > 0)
        {
            var rx = xsize / c.w;
            var ry = ysize / c.h;

            $pimg.css({
                width: Math.round(rx * boundx) + 'px',
                height: Math.round(ry * boundy) + 'px',
                marginLeft: '-' + Math.round(rx * c.x) + 'px',
                marginTop: '-' + Math.round(ry * c.y) + 'px'
            });
        }
    };

    function del_image(obj) {
        $(obj).parent().parent().remove();
        $('#upPicButton').show();
    }

</script>
</body>
</html>
